// 详情列表
<template>
  <div class="detailed-list" v-if="data">
    <van-nav-bar title="攻略" left-arrow @click-left="$router.go(-1)" fixed>
      <template #left>
        <van-icon name="revoke" color="#fdc03a" size="20" />
      </template>
    </van-nav-bar>

    <!-- 通知区域 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />

    <!-- 卡片 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- v-infinite-scroll="loadMore" -->

      <van-list
        :finished="finished"
        v-if="data && data.length != 0"
        v-infinite-scroll="onLoad"
        infinite-scroll-distance="30"
      >
        <!-- <van-cell v-for="item in list" :key="item" > -->
        <van-cell
          v-for="{ lid, title, l_uname, lname, ldate, limg, lsyn } in data"
          :key="lid"
          style="border-bottom: 1px solid #aaa"
          @click="$router.push(`/detail?id=${lid}`)"
        >
          <img class="img" :src="`http://39.108.211.154${limg}`" />
          <div>
            <div class="title">{{ title }}</div>
            <div
              style="
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              <div>{{ l_uname }}|{{ ldate.slice(0, 10) }}</div>
              <div>{{ lname }}</div>
            </div>
            <div class="text">
              {{ lsyn }}
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-empty
      v-if="data == 0"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      image-size="150px"
      description="暂时没有相关攻略哦!"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      list: [],
      loading: false, //true为加载状态
      stopLoading: false, //是否加载更多
      detailed: [], //绑定当前文章列表
      page: 1, //绑定当前页码
      pagesize: 8,
      ltypeid: "",
      all_page: 0,
      finished: false,
      isLoading: false,
    };
  },
  mounted() {
    console.log(this.$route.query.search, this.$route.query.type);
    if (!this.$route.query.search && !this.$route.query.type) {
      this.getData();
    } else if (this.$route.query.type && !this.$route.query.search) {
      this.type();
    } else if (!this.$route.query.type && this.$route.query.search) {
      this.loadMore();
    }
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.$router.go(0);
      }, 1000);
    },

    onLoad() {
      console.log("到底啦！！！！！");
      this.page++;
      // 此处的if else 用于判断当前是通过哪里跳到列表页
      // 1.通过 “更多” 或者 “搜索空” 跳到当前页，查询所有
      if (!this.$route.query.search && !this.$route.query.type) {
        // 如果当前页数和最大页数相等，则直接return跳出，不再触底加载
        if (this.page > this.all_page) {
          this.finished = true;
          return;
        }
        console.log("页码：", this.page);
        this.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle",
        });

        this.axios
          .get(`http://39.108.211.154:8080/list_page?page=${this.page}`)
          .then((res) => {
            console.log("全部触底:", this.page, res);
            this.data.push(...res.data);
            this.$indicator.close();
          });

        // 2.通过 “分类” 跳到当前页
      } else if (this.$route.query.type && !this.$route.query.search) {
        // 如果当前页数和最大页数相等，则直接return跳出，不再触底加载
        if (this.page > this.all_page) {
          this.finished = true;
          return;
        }
        console.log("页码：", this.page);
        this.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle",
        });
        this.axios
          .get(
            `http://39.108.211.154:8080/tra_list?ltypeid=${this.$route.query.type}&page=${this.page}`
          )
          .then((res) => {
            console.log("分类触底:", this.page, res);
            this.data.push(...res.data);
            this.$indicator.close();
          });

        // 3.通过 “非空搜索” 跳到当前页
      } else if (!this.$route.query.type && this.$route.query.search) {
        // 如果当前页数和最大页数相等，则直接return跳出，不再触底加载
        if (this.page > this.all_page) {
          this.finished = true;
          return;
        }
        // 加载中等待
        console.log("页码：", this.page);
        this.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle",
        });
        let params = `search=${this.$route.query.search}&page=${this.page}`;
        this.axios
          .post(`http://39.108.211.154:8080/tra_sea_list`, params)
          .then((res) => {
            console.log("搜索触底:", res);
            this.data.push(...res.data);
            // 关闭加载中等待
            this.$indicator.close();
          });
      }
    },

    // 查询全部
    getData() {
      // 查询每一个分类的总数，用于判断何时结束触底加载
      this.axios.get(`http://39.108.211.154:8080/list_all`).then((res) => {
        console.log("总数：", res.data[0].num);
        // 通过if语句得到总页数
        if (res.data[0].num % 8 > 0)
          this.all_page = Math.floor(res.data[0].num / 8) + 1;
        else this.all.page = res.data[0].num / 8;
        console.log("总页数：", this.all_page);
      });

      this.axios
        .get(`http://39.108.211.154:8080/list_page?page=${this.page}`)
        .then((res) => {
          console.log("搜索:", res);
          this.data = res.data;
        });
    },

    // 模糊查询
    loadMore() {
      let params1 = `search=${this.$route.query.search}`;
      let url1 = `http://39.108.211.154:8080/tra_sea_list_all`;
      this.axios.post(url1, params1).then((res) => {
        console.log("总数:", res.data[0].num);
        // 通过if语句得到总页数
        if (res.data[0].num % 8 > 0)
          this.all_page = Math.floor(res.data[0].num / 8) + 1;
        else this.all.page = res.data[0].num / 8;
        console.log("总页数：", this.all_page);
      });

      let params2 = `search=${this.$route.query.search}&page=${this.page}`;
      let url2 = `http://39.108.211.154:8080/tra_sea_list`;
      this.axios.post(url2, params2).then((res) => {
        console.log("搜索:", res);
        this.data = res.data;
      });
    },
    // 分类
    type() {
      // 查询每一个分类的总数，用于判断何时结束触底加载
      this.axios
        .get(
          `http://39.108.211.154:8080/tra_list_all?ltypeid=${this.$route.query.type}`
        )
        .then((res) => {
          console.log("总数：", res.data[0].num);
          // 通过if语句得到总页数
          if (res.data[0].num % 8 > 0)
            this.all_page = Math.floor(res.data[0].num / 8) + 1;
          else this.all.page = res.data[0].num / 8;
          console.log("总页数：", this.all_page);
        });

      this.axios
        .get(
          `http://39.108.211.154:8080/tra_list?ltypeid=${this.$route.query.type}&page=${this.page}`
        )
        .then((res) => {
          console.log("分类:", res);
          this.data = res.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.detailed-list {
  background: #fff;
  height: 46px;
  padding: 0 12px 5px !important;
}
.header {
  background-color: #fff;
  color: black;
  padding-bottom: 5px;
}
.mint-header-title {
  font-weight: bold;
  font-size: 20px;
}

.van-search__content {
  border-radius: 50px;
}

/* 文章列表卡片 */
.goods-card {
  margin: 0;
  background-color: #fff;
}

.van-cell__value {
  display: flex;
  width: 100%;
}

.img {
  width: 40%;
  height: 28vw;
  display: block;
  margin: 10px 10px 10px 0;
  border-radius: 20px;
}
.title {
  font-weight: bolder;
}
.text {
  color: #aaa;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

// 搜索为空的页面样式
.van-nav-bar__content {
  position: relative;
}
.van-empty {
  position: absolute;
  top: 200px;
  translate: 22%;
}
</style>